ReactのOSSを Amplify でホスティングしてみた – BMI Calculator編

#AWS Amplify

#AWS

川崎照夫

2022.08.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

テクニカルサポートチームの川崎です。

React の OSS は Amplify でホスティング可能のはず、ということで、Amplify OSS ホスティングチャレンジの第3弾です。

（第1弾、第2弾）

対象とするOSS

BMI は Body Mass Index （ボディ・マス・インデックス）の略称で、おなじみの体格指数のことです。

BMI Calculator は、身長と体重を入力すると、BMI の履歴を記録し、グラフに表示することができる、React 製の OSS アプリです。

残念ながら、GitHub のページのデモアプリへのリンクは 2022年8月23日現在、リンク切れになっていました。

フォークする

GitHub の自分のリポジトリにフォークします。private リポジトリを利用します。

# bareモードで clone する
git clone --bare https://github.com/GermaVinsmoke/bmi-calculator
# クローンしたディレクトリに移動
cd bmi-calculator.git/

# あらかじめgithub上のprivateリポジトリを作成しておく
# 作成したリポジトリにmirrorでpushする
git push --mirror git@github.com:kawasaki-teruo/bmi-calculator-20220701.git

# bareモードで clone したディレクトリは不要なので削除する
cd ../
rm -rf bmi-calculator.git

Amplify ホスティングでデプロイ

Amplify ホスティングでデプロイしてみました。

「使用を開始する」をクリックします。

「ウェブアプリケーションをホスト」の「使用を開始する」をクリックします。

接続する Git リポジトリを選択します。先ほど作成した GitHub のリポジトリを選択しました。

GitHub の認証を行った後、リポジトリとブランチを、それぞれ選択します。

ビルドの設定を確認します。今回のアプリでは特に変更は不要でした。

確認画面が表示されますので、「保存してデプロイ」をクリックすると、デプロイが開始されます。

デプロイが開始されました。

デプロイが完了しましたので、左下のホスティングURL をクリックして、アプリの動作確認を行います。

動作確認

ひとまず動作確認ができました。

本ブログの内容が、みなさまのお役に立てたら幸いです

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。